<template>
  <div class="filter-demo">
    <h2>筛选弹窗事件穿透修复示例</h2>

    <button class="open-btn" @click="openFilter">打开筛选弹窗</button>

    <!-- 模拟背景内容 -->
    <div class="background-content">
      <p v-for="n in 50" :key="n">
        这是背景内容第 {{ n }} 行，应该不会因为弹窗内的触摸而滚动。
      </p>
    </div>

    <!-- 筛选弹窗 -->
    <transition name="slide-up">
      <div
        v-if="visible"
        class="filter-overlay"
        @click="handleOverlayClick"
        @touchmove.prevent
      >
        <div class="filter-container" @click.stop @touchmove.stop>
          <!-- 标题栏 -->
          <div class="filter-header">
            <span class="title">筛选</span>
            <span class="close-btn" @click="visible = false">×</span>
          </div>

          <!-- 可滚动内容区域 -->
          <div
            ref="scrollAreaRef"
            class="filter-content dialog-scroll-area"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
          >
            <!-- 海友分组 -->
            <div class="filter-group">
              <div class="group-title">海友</div>
              <div class="filter-options">
                <div
                  v-for="item in haiyouOptions"
                  :key="item.value"
                  class="option-item"
                  :class="{ active: selectedHaiyou === item.value }"
                  @click="selectedHaiyou = item.value"
                >
                  {{ item.label }}
                </div>
              </div>
            </div>

            <!-- 城家公寓 -->
            <div class="filter-group">
              <div class="group-title">城家公寓</div>
              <div class="filter-input">
                <input
                  v-model="apartmentCode"
                  type="text"
                  placeholder="请输入"
                />
              </div>
            </div>

            <!-- 慧住分组 -->
            <div class="filter-group">
              <div class="group-title">慧住</div>
              <div class="filter-options">
                <div
                  v-for="item in huizhuOptions"
                  :key="item.value"
                  class="option-item"
                  :class="{ active: selectedHuizhu.includes(item.value) }"
                  @click="toggleHuizhu(item.value)"
                >
                  {{ item.label }}
                </div>
              </div>
            </div>

            <!-- 更多选项（模拟长列表） -->
            <div v-for="n in 5" :key="`group-${n}`" class="filter-group">
              <div class="group-title">选项组 {{ n }}</div>
              <div class="filter-options">
                <div
                  v-for="m in 8"
                  :key="`option-${n}-${m}`"
                  class="option-item"
                >
                  选项 {{ n }}-{{ m }}
                </div>
              </div>
            </div>
          </div>

          <!-- 底部按钮（关键区域） -->
          <div
            class="filter-footer dialog-footer"
            v-prevent-penetration
          >
            <button class="btn btn-clear" @click="clearFilters">
              清空筛选
            </button>
            <button class="btn btn-confirm" @click="confirmFilters">
              确定
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  usePreventDialogPenetration,
  useTouchPrevention,
  vPreventPenetration
} from '@/composables/usePreventDialogPenetration'

// 弹窗显示状态
const visible = ref(false)

// 使用防穿透功能
usePreventDialogPenetration(visible, {
  lockBody: true,
  restoreScroll: true,
  preventBodyTouch: true
})

// 滚动区域引用
const scrollAreaRef = ref(null)

// 触摸事件处理
const { handleTouchStart, handleTouchMove } = useTouchPrevention(
  computed(() => scrollAreaRef.value)
)

// 筛选选项数据
const haiyouOptions = [
  { label: '海友9.0', value: '9.0' },
  { label: '海友8.0', value: '8.0' },
  { label: '海友（其他）', value: 'other' }
]

const huizhuOptions = [
  { label: '慧住', value: 'huizhu' },
  { label: '你好', value: 'nihao' },
  { label: '提前启动', value: 'qidong' }
]

// 选中状态
const selectedHaiyou = ref('9.0')
const selectedHuizhu = ref([])
const apartmentCode = ref('')

// 打开筛选
const openFilter = () => {
  visible.value = true
}

// 点击遮罩关闭
const handleOverlayClick = () => {
  visible.value = false
}

// 切换慧住选项（多选）
const toggleHuizhu = (value) => {
  const index = selectedHuizhu.value.indexOf(value)
  if (index > -1) {
    selectedHuizhu.value.splice(index, 1)
  } else {
    selectedHuizhu.value.push(value)
  }
}

// 清空筛选
const clearFilters = () => {
  selectedHaiyou.value = ''
  selectedHuizhu.value = []
  apartmentCode.value = ''
}

// 确定筛选
const confirmFilters = () => {
  console.log('筛选条件:', {
    haiyou: selectedHaiyou.value,
    huizhu: selectedHuizhu.value,
    apartment: apartmentCode.value
  })
  visible.value = false
}
</script>

<style scoped>
.filter-demo {
  padding: 20px;
}

.open-btn {
  width: 200px;
  padding: 12px 24px;
  background: #00a0e9;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

.background-content {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.background-content p {
  margin: 10px 0;
  padding: 10px;
  background: white;
  border-radius: 4px;
}

/* 弹窗遮罩 */
.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;

  /* 关键：阻止触摸穿透 */
  touch-action: none;
  overscroll-behavior: contain;
}

/* 弹窗容器 */
.filter-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background: #f5f5f5;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;

  /* 允许内部元素滚动 */
  touch-action: pan-y;
  transform: translate3d(0, 0, 0);
}

/* 标题栏 */
.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #eee;
  border-radius: 12px 12px 0 0;

  /* 防止标题栏触摸穿透 */
  touch-action: none;
}

.filter-header .title {
  font-size: 17px;
  font-weight: 500;
  color: #333;
}

.filter-header .close-btn {
  font-size: 28px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0 5px;
}

/* 可滚动内容区域 */
.filter-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px 20px 20px;

  /* 优化滚动性能 */
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;

  /* 只允许垂直滚动 */
  touch-action: pan-y;
}

/* 筛选组 */
.filter-group {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.group-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
  font-weight: 500;
}

/* 选项列表 */
.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.option-item {
  padding: 8px 16px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  user-select: none;
  -webkit-user-select: none;

  /* 防止选项触发意外滚动 */
  touch-action: manipulation;
}

.option-item.active {
  background: #e6f7ff;
  border-color: #00a0e9;
  color: #00a0e9;
}

/* 输入框 */
.filter-input input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;

  /* 输入框允许正常操作 */
  touch-action: manipulation;
}

/* 底部按钮区域（关键） */
.filter-footer {
  display: flex;
  padding: 10px;
  gap: 10px;
  background: white;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);

  /* 关键：完全阻止底部按钮区域的触摸事件 */
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}

.btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;

  /* 按钮本身也防止事件穿透 */
  touch-action: manipulation;
}

.btn-clear {
  background: white;
  border: 1px solid #ddd;
  color: #666;
}

.btn-confirm {
  background: #00a0e9;
  color: white;
}

.btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* 弹窗动画 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
}

.slide-up-enter-from .filter-container,
.slide-up-leave-to .filter-container {
  transform: translateY(100%);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .filter-container {
    max-height: 85vh;
  }
}
</style>
